<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<div class="modal fade" id="modal-create-program">
    <div class="modal-dialog" style="width:1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">会议信息</h4>
            </div>
            <div class="modal-body">
                <form id="programForm" class="form-horizontal">
                    <input type="hidden" id="id" name="id">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="col-sm-2">
                                        <select name="category" class="form-control">
                                            <option th:each="category:${categories}" th:value="${category.name}" th:text="${category.name}"></option>
                                        </select>
                                    </div>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="title" placeholder="主题">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" name="sender" placeholder="发送部门">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" name="receiver" placeholder="接收部门">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control datepicker" name="date" readonly placeholder="会议时间">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" name="address" placeholder="会议地点">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div id="file-div" class="col-md-12">

                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">附件</label>
                                    <div class="col-sm-11">
                                        <input type="file" multiple="multiple" name="file">
                                        <p class="help-block">请选择所需要上传的文件</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div id="editor"></div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-program">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1>
        公司战略纲领
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">

                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>类别</label>
                                    <select name="category" class="form-control">
                                        <option value="" selected="selected">请选择</option>
                                        <option th:each="category:${categories}" th:value="${category.name}" th:text="${category.name}"></option>
                                    </select>
                                    <!--<label>类别</label>
                                    <input type="text" name="category" class="form-control" placeholder="请输入类别">-->
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>主题</label>
                                    <input type="text" name="title" class="form-control" placeholder="请输入会议主题">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>发送部门</label>
                                    <input type="text" name="sender" class="form-control" placeholder="请输入发送部门">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>接收部门</label>
                                    <input type="text" name="receiver" class="form-control" placeholder="请输入接收部门">
                                </div>
                                <!--<div class="form-group" style="margin-right: 10px;">
                                    <label>时间</label>
                                    <input type="text" class="form-control datepicker" name="startTime" readonly="readonly"/>
                                    <span>至</span>
                                    <input type="text" class="form-control datepicker" name="endTime" readonly="readonly"/>
                                </div>-->
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <!--<i class="fa fa-search"></i>-->
                                    <span class="Bold">搜索</span>
                                </button>
                                <a shiro:hasPermission="program:save" href="javascript:void(0);" class="btn btn-info pull-right" onclick="openCreateProgramModal()">
                                    <!--<i class="fa fa-plus"></i>-->
                                    <span class="Bold">添加</span>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                    <!--<div class="col-xs-12">
                        <div class="col-xs-6">
                            <table id="bootstrap-table"></table>
                        </div>
                        <div class="col-xs-6">
                            <table id="bootstrap-table1"></table>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="col-xs-6">
                            <table id="bootstrap-table2"></table>
                        </div>
                        <div class="col-xs-6">
                            <table id="bootstrap-table3"></table>
                        </div>
                    </div>-->
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:src="@{/plugin/wangeditor/wangEditor.min.js}"></script>
<script th:inline="javascript">

    var table, editor;

    /** 删除会议 */
    function del(id) {
        js.modal.confirm("确定删除这项会议吗？", function (result) {
            js.post({
                url: ctx + "overview/program/del",
                data: {
                    id: id,
                    status: 0
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    /** 退回会议 */
    function reject(id) {
        js.modal.confirm("确定退回这项会议吗？", function (result) {
            js.post({
                url: ctx + "overview/program/reject",
                data: {
                    id: id,
                    status: 1
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    /** 提交会议 */
    function commit(id) {
        js.modal.confirm("提交后不可再修改，确定提交这项会议吗？", function () {
            js.post({
                url: ctx + "overview/program/commit",
                data: {
                    id: id,
                    status: 2
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    /** 打开模态框 */
    function openCreateProgramModal() {
        js.modal.open("modal-create-program");
    }

    /** 打开模态框同时根据ID查询并回显权限数据 */
    function openEditProgramModal(id) {
        js.post({
            url: ctx + "overview/program/id",
            data: {
                id: id
            },
            success: function (result) {
                $("#programForm").fillData(result);
                editor.txt.html(result.content);
                var html = [];
                $.each(result.files, function (index,file) {
                    html.push('<div class="row" style="margin-bottom: 5px" id="file-' + file.id + '"><div class="col-md-5 col-md-offset-2">');
                    html.push('<a href="' + file.url + '" target="_blank">' + file.name + '</a>');
                    html.push('</div><div class="col-md-1">');
                    html.push('<a class="btn btn-danger btn-xs" href="javascript:void(0);" onclick="delFile(' + file.id + ')">删除</a></div></div>');
                });
                $("#file-div").html(html.join(''));
                js.modal.open("modal-create-program");
                js.modal.closeLoading();
                // 验证无法触发隐藏状态的表单，回显示数据后延时半秒先做验证，
                // 否则提交如果有远程验证则需点击两次
                setTimeout(function () {
                    js.validate.validing("programForm");
                }, 500);
            }
        })
    }

    function delFile(id) {
        js.modal.confirm("确认删除此文件吗？", function () {
            js.post({
                url: ctx + "overview/program/file/del",
                data: {
                    id: id,
                    status: 0
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        $("#file-" + id).remove();
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    $(function () {

        /** 初始化富文本编辑器 */
        editor = new wangEditor('#editor');
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            // 'foreColor',  // 文字颜色
            // 'backColor',  // 背景颜色
            // 'link',  // 插入链接
            // 'list',  // 列表
            // 'justify',  // 对齐方式
            // 'quote',  // 引用
            // 'emoticon',  // 表情
            // 'image',  // 插入图片
            // 'table',  // 表格
            // 'video',  // 插入视频
            // 'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ];
        editor.create();

        /** 加载表格 */
        table = js.table.init({
            url: ctx + "overview/program/list",
            columns: [
                {
                    title: '序号', field: 'id', width: '40',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                { title: "类别", field: 'category', width: '80'},
                { title: "主题", field: 'title'},
                { title: "发送部门", field: 'sender', width: '150'},
                { title: "接收部门", field: 'receiver', width: '150'},
                { title: "时间", field: 'date', width: '100'},
                { title: "地点", field: 'address', width: '150'},
                {
                    title: "操作", width: '180',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="'+ ctx + 'overview/program/' + row.id + '"> 查看</a> ');
                        if (row.status === 1) {
                            if (hasP("program:update")) {
                                actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openEditProgramModal(' + row.id + ')"> 编辑</a> ');
                            }
                            if (hasP("program:commit")) {
                                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="commit(' + row.id + ')"> 提交</a> ');
                            }
                        } else {
                            if (hasP("program:reject")) {
                                actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="reject(' + row.id + ')"> 驳回</a> ');
                            }
                        }
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="del(' + row.id + ')"> 删除</a> ');
                        return actions.join('');
                    }
                }
            ]
        });


        /** 表格搜索 */
        $("#btn-search").click(function () {
            js.table.search(table);
        });

        /** 验证 */
        js.validate.init("programForm", {
            fields: {
                category: {validators: {notEmpty: {message: '请输入会议类别'}}},
                title: {validators: {notEmpty: {message: '请输入会议主题'}}},
                sender: {validators: {notEmpty: {message: '请输入发送部门'}}},
                receiver: {validators: {notEmpty: {message: '请输入接收部门'}}},
                date: {validators: {notEmpty: {message: '请输入会议时间'}}},
                address: {validators: {notEmpty: {message: '请输入会议地点'}}}
            }
        });

        /**
         * 创建或编辑
         */
        $("#btn-create-program").click(function () {
            var url = ctx + "overview/program/save";
            if ($("#id").val()) {
                url = ctx + "overview/program/update";
            }
            var formData = new FormData($("#programForm")[0]);
            formData.append("content", editor.txt.html());
            js.validSubmit({
                formId: "programForm",
                url: url,
                data: formData,
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-create-program");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        });

        /**
         * 模态框隐藏事件， 重置表单，重置验证
         */
        js.modal.hideEvent("modal-create-program", function () {
            js.validate.reset("programForm");
            js.reset("programForm");
        });

    });

</script>
</body>
</html>
